<template>
	<div class="goods">
        <router-link to="/search">
            <span class="fa fa-search"></span>
            <input type="text" placeholder="搜一搜">
        </router-link>
        <main>
            <div class="left">
                <router-link to="/goods">
                    <div class="jydq" @click="fn" :style="ba">家用电器</div>
                </router-link>
                <router-link to="/goods1">
                    <div>居家餐厨</div>
                </router-link>
                <router-link to="/goods2">
                    <div>服饰装配</div>
                </router-link>
            </div>
            <div class="right">
                <header>
                    <img src="../assets/img/yptj.png" alt="">
                </header>
                <div class="wntj">
                    <p>生活电器</p>
                    <div>
                        <dl v-for="item in shdqarr.goodsList" :key="item.id"  @click="dq(item)">
                           <router-link class="wydq" :to="`/details?id=${item.id}&type=${shdqarr.type}&title=${item.title}`">
                                <dt><img :src="$base + '/'+ item.img"> </dt>
                                <dd>{{item.title}}</dd>
                            </router-link>
                        </dl>
                    </div>
                </div>
                <div class="wntj">
                    <p>厨房小电</p>
                    <div>
                        <dl v-for="item1 in cfxdarr.goodsList" :key="item1.id" @click="two(item1)">
                            <router-link class="wydq" :to="`/details?id=${item1.id}&type=${cfxdarr.type}&title=${item1.title}`">
                                <dt> <img :src=" $base  + '/' + item1.img" alt=""> </dt>
                                <dd>{{item1.title}}</dd>
                            </router-link>
                        </dl>
                    </div>
                </div>
            </div>
        </main>
	</div>
</template>

<script>
	export default{
	    data(){
            return {
                ba : '',
                shdqarr : {},
                cfxdarr : {}
            }
        },
		methods : {
            fn:function(){
                this.ba = {"background":"red","color" : "#f7f7df"};
            },
			dq:function(item){
				item.num = 1;
				var ip = JSON.parse(localStorage.getItem('good'));
			
				
				ip[item.title] = item;
				localStorage.setItem('good',JSON.stringify(ip));
			},
			two(item1){
				
				item1.num = 1;
				var ip = JSON.parse(localStorage.getItem('good'));
							
				
				ip[item1.title] = item1;
				localStorage.setItem('good',JSON.stringify(ip));
			}
        },
        async mounted(){
            this.ba = {"background":"red","color" : "#f7f7df"};
			
            //生活电器
            var {data} = await this.$axios.get(this.$base + '/shdq')
            this.$set(this.shdqarr,"goodsList",data);
            this.$set(this.shdqarr,"type","shdq");
            //厨房小电
            var {data} = await this.$axios.get(this.$base + '/cfxd')
            // .then(res=>res.result.data)
            this.$set(this.cfxdarr,"goodsList",data);
            this.$set(this.cfxdarr,"type","cfxd");
        }
	}
</script>
 
<style lang="scss">
    .goods{
        height : 100%;
        display: flex;
        flex-direction: column;
        a{
            height: 1.27rem;
            display: inline-block;
            input{
                width : 8.74rem;
                height : 0.87rem;
                margin : 0.2rem 0.8rem;
                border-radius: 0.5rem;
                outline : none;
                background : #f6f6f6;
                border : none;
                padding-left : 1.16rem;
            }
            .fa-search{
                position : absolute;
                left : 1.2rem;
                top : 0.36rem;
                color : #c6c6c6;
            }
        }
        
        main{
            flex : 1;
            background : #f8f8f8;
            color : #000;
            width : 10.8rem;
            padding : 0;
            display : flex;
            border-top : 1px solid #efefef;
            overflow: auto;
            margin-bottom : 1.52rem;
            .left::-webkit-scrollbar{
                display : none;
            }
            .left{
                height: 100%;
                width : 2.68rem;
                display: flex;
                flex-direction: column;
                overflow: auto;
                background : #fff;
                div{
                    font-size : 0.32rem;
                    color : #707070;
                    margin : 0.36rem 0.27rem;
                    padding : 0.18rem 0.37rem;
                    border-radius : 0.5rem;
                    box-sizing : border-box;
                    text-align : center;
                }
            }
            .right::-webkit-scrollbar{
                display : none;
            }
            .right{
                overflow: auto;
                flex : 1;
                background : #f7f7f7;
                padding : 0.27rem 0.29rem;
                // margin-bottom : 0;
                header{
                    width : 100%;
                    margin : 0.29rem 0 0.58rem;
                    img{
                        width : 7.55rem;
                    }
                }
                .wntj{
                    width : 7.56rem;
                    background : #fff;
                    border-radius : 0.2rem;
                    margin : 0.29rem 0;
                    p{
                        width : 100%;
                        height : 1.04rem;
                        padding : 0.36rem 0  0 0.3rem;
                        box-sizing : border-box;
                    }
                    div{
                        display : flex;
                        flex-wrap:wrap;
                        justify-content: space-between;
                        align-items: center; 
                        padding-bottom : 0.36rem;
                        .wydq{
                            height : 100%;
                        }
                        dl{
                            text-align : center;
                            dt{
                                img{
                                    width : 2.19rem;
                                    height : 1.8rem;
                                }
                            }
                            dd{
                                color : #6e6e6e;
                                font-size : 0.26rem;
                            }
                        }
                    }
                }
            }   
        }
    }
</style>